<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
		/*键盘事件练习：用上下左右键控制图片移动*/
			var img=document.getElementsByTagName("img")[0];
			var dir=0;
			var speed=20;
			setInterval(function(){
				switch(dir){
					case 37:
						img.style.left=img.offsetLeft-speed+"px";
						break;
					case 38:
						img.style.top=img.offsetTop-speed+"px";
						break;
					case 39:
						img.style.left=img.offsetLeft+speed+"px";
						break;
					case 40:
						img.style.top=img.offsetTop+speed+"px";
						break;
				}
				},30)
			document.onkeydown=function(event){
				event=event ||window.event;
				if(event.ctrlKey){/*按住Ctrl键改变速度*/
					speed=40;
				}else{
					speed=20;
				}
				dir=event.keyCode;
			}
			document.onkeyup=function(){
				dir=0;
			}
		}
		</script>
	</head>
	<body>
		<img src="img/1.jpg" style="position: absolute;"/>
	</body>
</html>
